import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { message } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import BraftEditor from '@/components/BraftEditor'
import styles from './index.module.less'
import store from '@/redux/store'
import {
  createExampleApi,
  getExampleDetailApi,
  updateExampleApi,
} from '@/request/api/example'
import {
  createNoteApi,
  getNoteDetailApi,
  updateNoteApi,
} from '@/request/api/notes'
import MarkdownViewer from '@/components/MarkdownViewer'

export default function Edit() {
  const [projectId, setProjectId] = useState<string>(
    store.getState().harvestInfoReducer.projectId
  )
  const [harvestId, setHarvestId] = useState<string>(
    store.getState().harvestInfoReducer.harvestId
  )
  const [description, setDescription] = useState<string>(
    store.getState().harvestInfoReducer.description
  )

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setProjectId(store.getState().harvestInfoReducer.projectId)
      setHarvestId(store.getState().harvestInfoReducer.harvestId)
      setDescription(store.getState().harvestInfoReducer.description)
    })

    return () => {
      unsubscribe()
    }
  }, [])

  const { type, editId } = useParams()

  const [option, setOption] = useState<string>('')

  useEffect(() => {
    if (!type) return setOption('createExample')
    setOption(type)
  }, [editId, type])

  // 编辑器选项
  const editorOption = {
    createExample: (
      <CreateExampleEditor projectId={projectId} harvestId={harvestId} />
    ),
    updateExample: <UpdateExampleEditor exampleId={editId} />,
    createNote: <CreateNoteEditor projectId={projectId} exampleId={editId} />,
    updateNote: <UpdateNoteEditor noteId={editId} />,
  }

  return (
    <div className={styles.editContainer}>
      <div className={styles.label}>收获描述：</div>
      <div className={styles.description}>{description}</div>

      {/* 各类编辑器 */}
      {editorOption[option]}
    </div>
  )
}

//
// 创建示例编辑器
function CreateExampleEditor({ projectId, harvestId }) {
  //  内容
  const [content, setContent] = useState<string>('<h1>Hello World!</h1>')
  // 获取编辑器中的内容，并对内容进行操作
  const getEditorContent = (contents: { html: string; raw: string }) => {
    createExample(contents.html, contents.raw)
  }

  // 创建示例
  const createExample = async (content: string, editContent: string) => {
    const res = await createExampleApi({
      projectId,
      harvestId,
      content,
      editContent,
    })

    if (res.code !== 200) return message.error('创建示例失败！')
    message.success('创建示例成功！')
  }

  return (
    <div className={styles.createExampleEditor}>
      <div className={styles.label}>
        创建示例编辑器 &nbsp;&nbsp;
        <ExclamationCircleOutlined
          style={{ fontSize: '22px', color: 'red' }}
          title="添加代码片段时，代码片段前请先添加一些文本或其他，防止代码检测不完全"
        />
      </div>

      {
        /* 富文本编辑器 */
        // @ts-ignore 忽略类型检查
        <BraftEditor
          // @ts-ignore
          initContent={content}
          getContent={getEditorContent}
          buttonLabel="创建示例"
        />
      }
    </div>
  )
}

//
// 更新示例编辑器
function UpdateExampleEditor({ exampleId }) {
  useEffect(() => {
    if (exampleId) getExampleDetail()
  }, [exampleId])

  //  内容
  const [content, setContent] = useState<string>('<h1>Hello World!</h1>')
  // 获取编辑器中的内容，并对内容进行操作
  const getEditorContent = (contents: { html: string; raw: string }) => {
    updateExample(contents.html, contents.raw)
  }

  // 获取示例详情
  const getExampleDetail = async () => {
    const res = await getExampleDetailApi(exampleId)
    if (res.code === 200) return setContent(res.data.editContent)

    setContent('')
    message.error('获取要修改的示例详情失败！')
  }

  // 更新示例
  const updateExample = async (content: string, editContent: string) => {
    const res = await updateExampleApi({
      id: exampleId,
      content,
      editContent,
    })
    if (res.code !== 200) return message.error('更新失败！')
    message.success('更新成功！')
  }

  return (
    <div className={styles.updateExampleEditor}>
      <div className={styles.label}>
        更新示例编辑器 &nbsp;&nbsp;
        <ExclamationCircleOutlined
          style={{ fontSize: '22px', color: 'red' }}
          title="添加代码片段时，代码片段前请先添加一些文本或其他，防止代码检测不完全"
        />
      </div>

      {
        /* 富文本编辑器 */
        // @ts-ignore 忽略类型检查
        <BraftEditor
          // @ts-ignore
          initContent={content}
          getContent={getEditorContent}
          buttonLabel="更新示例"
        />
      }
    </div>
  )
}

//
// 创建笔记编辑器
function CreateNoteEditor({ projectId, exampleId }) {
  useEffect(() => {
    if (exampleId) getExampleDetail(exampleId)
  }, [exampleId])

  //  内容
  const [content, setContent] = useState<string>('<h1>Hello World!</h1>')
  // 获取编辑器中的内容，并对内容进行操作
  const getEditorContent = (contents: { html: string; raw: string }) => {
    createNote(contents.html, contents.raw)
  }

  // 展示的示例详情
  const [exampleDetail, setExampleDetail] = useState<string>('')
  // 获取示例详情
  const getExampleDetail = async (id: string) => {
    const res = await getExampleDetailApi(id)
    if (res.code === 200) return setExampleDetail(res.data.content)
    setExampleDetail('')
    message.error('展示示例详情失败！')
  }

  // 创建笔记
  const createNote = async (content: string, editContent: string) => {
    const res = await createNoteApi({
      projectId,
      exampleId,
      content,
      editContent,
    })

    if (res.code !== 200) return message.error('创建笔记失败！')
    message.success('创建笔记成功！')
  }

  // 示例展示组件
  function Example({ c }) {
    return (
      <>
        <div
          style={{
            fontSize: '16px',
            color: '#f59178',
            fontWeight: 'bold',
            userSelect: 'none',
            paddingBottom: '6px',
          }}
        >
          示例详情：
        </div>
        <MarkdownViewer markdownContent={c} />
      </>
    )
  }

  return (
    <div className={styles.createNoteEditor}>
      {/* 编辑笔记时展示示例详情 */}
      {exampleDetail ? <Example c={exampleDetail} /> : ''}

      <div className={styles.label}>
        创建笔记编辑器 &nbsp;&nbsp;
        <ExclamationCircleOutlined
          style={{ fontSize: '22px', color: 'red' }}
          title="添加代码片段时，代码片段前请先添加一些文本或其他，防止代码检测不完全"
        />
      </div>

      {
        /* 富文本编辑器 */
        // @ts-ignore 忽略类型检查
        <BraftEditor
          // @ts-ignore
          initContent={content}
          getContent={getEditorContent}
          buttonLabel="创建笔记"
        />
      }
    </div>
  )
}

//
// 更新笔记编辑器
function UpdateNoteEditor({ noteId }) {
  useEffect(() => {
    if (noteId) getNoteDetail()
  }, [noteId])

  //  内容
  const [content, setContent] = useState<string>('<h1>Hello World!</h1>')
  // 获取编辑器中的内容，并对内容进行操作
  const getEditorContent = (contents: { html: string; raw: string }) => {
    updateNote(contents.html, contents.raw)
  }

  // 展示的示例详情
  const [exampleDetail, setExampleDetail] = useState<string>('')
  // 获取示例详情
  const getExampleDetail = async (id: string) => {
    const res = await getExampleDetailApi(id)
    if (res.code === 200) return setExampleDetail(res.data.content)
    setExampleDetail('')
    message.error('展示示例详情失败！')
  }

  // 获取笔记详情
  const getNoteDetail = async () => {
    const res = await getNoteDetailApi(noteId)
    if (res.code === 200) {
      getExampleDetail(res.data.exampleId)
      return setContent(res.data.editContent)
    }

    setContent('')
    message.error('获取要修改的笔记详情失败！')
  }

  // 更新笔记
  const updateNote = async (content: string, editContent: string) => {
    const res = await updateNoteApi({
      id: noteId,
      content,
      editContent,
    })

    if (res.code !== 200) return message.error('更新笔记失败！')
    message.success('更新笔记成功！')
  }

  // 示例展示组件
  function Example({ c }) {
    return (
      <>
        <div
          style={{
            fontSize: '16px',
            color: '#f59178',
            fontWeight: 'bold',
            userSelect: 'none',
            paddingBottom: '6px',
          }}
        >
          示例详情：
        </div>
        <MarkdownViewer markdownContent={c} />
      </>
    )
  }

  return (
    <div className={styles.updateNoteEditor}>
      {/* 编辑笔记时展示示例详情 */}
      {exampleDetail ? <Example c={exampleDetail} /> : ''}

      <div className={styles.label}>
        更新笔记编辑器 &nbsp;&nbsp;
        <ExclamationCircleOutlined
          style={{ fontSize: '22px', color: 'red' }}
          title="添加代码片段时，代码片段前请先添加一些文本或其他，防止代码检测不完全"
        />
      </div>

      {
        /* 富文本编辑器 */
        // @ts-ignore 忽略类型检查
        <BraftEditor
          // @ts-ignore
          initContent={content}
          getContent={getEditorContent}
          buttonLabel="更新笔记"
        />
      }
    </div>
  )
}
